<template>
  <div
    class="
      vc-text-xl
      md:vc-text-2xl
      vc-text-gray-600 vc-select-none vc-bg-white vc-shadow-lg vc-px-2 vc-py-1 vc-rounded
    "
  >
    <Icon name="zoom-in" class="vc-cursor-pointer active:vc-text-blue-600" @click.stop="zoomIn" />
    <span class="vc-text-lg vc-inline-block vc-text-center vc-w-20">{{ Math.round(modelValue * 100) + "%" }}</span>
    <Icon name="zoom-out" class="vc-cursor-pointer" @click.stop="zoomOut" />
  </div>
</template>
<script setup lang="ts">
import Icon from "/@/components/base/Icon.vue";
const props = withDefaults(
  defineProps<{
    modelValue: number;
    zoomHandler?: (isIn: boolean, value: number) => number;
    step?: number;
    min?: number;
    max?: number;
  }>(),
  {
    step: 0.1,
    min: 0.3,
    max: 10,
  }
);
const emits = defineEmits(["update:modelValue", "change"]);
function zoomIn() {
  let value = props.modelValue * 100;
  if (props.zoomHandler) {
    value = props.zoomHandler(true, value);
  } else {
    value = value + props.step * (value >= 100 ? 2 : 1) * 100;
  }
  value = value / 100;
  if (value > props.max) {
    value = props.max;
  }
  emits("change", value);
  emits("update:modelValue", value);
}
function zoomOut() {
  let value = props.modelValue * 100;
  if (props.zoomHandler) {
    value = props.zoomHandler(false, value);
  } else {
    value = value - props.step * (value > 100 ? 2 : 1) * 100;
  }
  value = value / 100;
  if (value < props.min) {
    value = props.min;
  }
  emits("change", value);
  emits("update:modelValue", value);
}
</script>
